<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="box">
    <!-- 头部导航栏 -->
    <div class="Navigation">
      <van-nav-bar title="医生详情" left-arrow @click-left="onClickLeft" />
    </div>

    <div class="doctor">
      <div class="lefts">
        <img src="../../assets/image/t1.jpg" alt="">
      </div>

      <div class="rights">
        <p><b>吴嫣然</b><span>主治医师</span><span style="margin-left: 60px;font-size: 20px;"><van-icon name="like-o"
              color="#ee0a24" /></span></p>
        <p>清华大学附属医院</p>
        <p><span>好评率0.00%</span><span>服务患者数2</span></p>
        <p><span class="gifts"></span><span>他收到的礼物</span></p>
        <p>
          <img src="../../assets/image/hh.jpg" alt="">
          <img src="../../assets/image/zs.jpg" alt="">
          <img src="../../assets/image/jb.jpg" alt="">
        </p>
      </div>
    </div>

    <div class="general">
      <span class="lgifts"></span>
      <b>个人简介</b>
    </div>

    <p style="margin-left: 20px;">很板正啊</p>

    <div class="general">
      <span class="lgifts"></span>
      <b>擅长领域</b>
    </div>

    <p style="margin-left: 20px;">多好</p>

    <div class="general">
      <span class="lgifts"></span>
      <b>用户评价(0条评论)</b>
    </div>

    <a href="./Comments">点击查看更多评论</a>

    <p>
      <span style="margin-left: 80px;">500H币/次</span>
      <router-link to="./Counseling"><van-button type="primary">立即咨询</van-button></router-link>
    </p>

  </div>
</template>

<script setup lang="ts">
import 'vant/es/toast/style';
const onClickLeft = () => history.back();


</script>

<style scoped lang="scss">
.box {
  width: 100vw;
  height: 100vh;
}

.lefts {
  float: left;
  width: 45%;
  height: 250px;

  img {
    width: 80%;
    height: 200px;
    margin-left: 10%;
    margin-top: 10%;
  }
}

.rights {
  float: left;
  width: 55%;
  height: 250px;

}

p {
  line-height: 35px;

  img {
    width: 30%;
    height: 50%;
  }
}

.gifts {
  display: inline-block;
  width: 4px;
  height: 18px;
  background: #66cbff;
  margin-right: 10px;
}

.doctor {
  width: 100%;
  height: 250px;
}

.general {
  width: 100%;
  height: 40px;
  background: #f4f4f4;
  line-height: 40px;
}

.lgifts {
  display: inline-block;
  width: 6px;
  height: 20px;
  margin-left: 15px;
  margin-right: 15px;
  background: #3087ea;
}

a {
  display: inline-block;
  color: #3087ea;
  margin-left: 130px;
  line-height: 60px;
}
</style>